<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="../plugin/element-ui/index.css">
    <link rel="stylesheet" href="../style/employee.css"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="employee_app">
        <div class="head_title">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a href="../page/firstIndex.html">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>员工信息</el-breadcrumb-item>
              </el-breadcrumb>
        </div>
        <div>
            <el-input
                    class="Search_input"
                    placeholder="请输入用户姓名"
                    v-model="input"
                    clearable>
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="searchBtn" class="searchBtn">搜索</el-button>
            <el-button type="success" class="addBtn" @click="addPage">添加用户</el-button>
        </div>
        <el-table
                        :data="FormData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            align="center"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            type="index"
                            align="center"
                            label="序号"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            align="center"
                            label="用户名"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            align="center"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            width="80"
                            align="center"
                            label="性别" >

                        <template slot-scope="scope">
                            {{ String(scope.row.sex) === '0' ? '女' : '男' }}
                        </template>


                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            width="210"
                            align="center"
                            label="电话">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            width="240"
                            align="center"
                            label="创建日期">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            width="160"
                            align="center"
                            label="状态">
                        <template slot-scope="scope">
                            {{ scope.row.enabled ? '正常' : '禁用' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  align="center" width="320">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="EditInfo(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="warning"
                                    @click="handleEdit(scope.$index, scope.row)">{{ scope.row.enabled ? '禁用' : '启用' }}</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=totalSize>
                </el-pagination>
            </div>


    </div>
</body>
<script src="../plugin/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugin/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugin/axios/axios.min.js"></script>
<script src="../js/employee.js"></script>
<script>
    let app = new Vue({
        el: "#employee_app",
        data() {
            return {
                page:1,
                pageSize:5,
                FormData:[{
                    username:'',
                    name:'',
                    sex:0,
                    phone:'',
                    createTime:'',
                    enabled:true,
                    accountNonExpired:true,
                    accountNonLocked:true,
                    credentialsNonExpired:true
                }],
                input: '',
                totalSize:0,
                enabled:true,
                accountNonExpired:true,
                accountNonLocked:true,
                credentialsNonExpired:true,
                id:''
            }
        },
        created(){
            this.init()
        },
        methods: {
            async init(){
               let user = window.localStorage.getItem("userInfo")
               if(user!=null){
                    let employee = await getEmployee(this.page,this.pageSize,this.input)
                    if (String(employee.data.code) === '1') {
                           this.FormData = employee.data.data.records
                           this.totalSize = employee.data.data.total
                       }

               }
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            async handleEdit(index, row) {
                console.log(row)
                this.enabled=!row.enabled?true:false
                this.accountNonLocked=!row.accountNonLocked?true:false
                this.accountNonExpired=!row.accountNonExpired?true:false
                this.credentialsNonExpired=!row.credentialsNonExpired?true:false
                this.id=row.id
                console.log(this.enabled)
                this.$confirm('确定调整该用户状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await EditEmployee({'id':this.id,'enabled':this.enabled,'accountNonLocked':this.accountNonLocked,'accountNonExpired':this.accountNonExpired,'credentialsNonExpired':this.credentialsNonExpired})
                    if(res.data.code==1){
                        this.$message({
                            type: 'success',
                            message: '更新成功!'
                        });
                        this.init()
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '系统错误!'
                        });
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                });




            },
            async handleDelete(index, row) {
                console.log(index, row);

                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    this.id=row.id
                    let res = await deleteEmployee(this.id)
                    if(res.data.code==1){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.init()
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '系统错误!'
                        });
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });



            },
            async EditInfo(index, row) {
                let id=row.id
                window.location.href="../page/addEmployee.html?titleFlag=false&id="+id

            },
            handleSizeChange(val) {
                this.pageSize=val
                this.init()
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.page=val
                this.init()
                console.log(`当前页: ${val}`);
            },
            searchBtn(){
                this.init()
            },
            addPage(){
                window.location.href="../page/addEmployee.html"
            }
        }
    })
</script>

</html>